<template>
  <van-cell>
    <van-image
      slot="icon"
      round
      width="30"
      height="30"
      style="margin-right: 10px;"
      :src="comment.aut_photo"
    />
    <span style="color: #466b9d;" slot="title">{{ comment.aut_name }}</span>
    <div slot="label">
      <p style="color: #363636;">{{ comment.content }}</p>
      <p>
        <span style="margin-right: 10px;">{{
          comment.pubdate | relativeTime
        }}</span>
        <van-button size="mini" type="default"
        @click="$emit('click-reply',comment)"
          >回复({{ comment.reply_count }})</van-button
        >
      </p>
    </div>
    <van-button
      class="btn"
      :class="{ active: comment.is_liking }"
      slot="right-icon"
      :icon="comment.is_liking ? 'good-job' : 'good-job-o'"
      @click="onZanComment"
      :loading="zanLoading"
      >{{ comment.like_count || "赞" }}
    </van-button>
  </van-cell>
</template>

<script>
// 导入对评论点赞和取消点赞方法
import { addCommentLike, deleteCommentLike } from '@/api/comment'
export default {
  name: "CommentItem",
  props: {
    comment: {
      type: Object,
      required: true
    }
  },
  data() {
      return {
      zanLoading: false
    }
  },
  methods: {
    async onZanComment() {
      this.zanLoading = true;
      try {
        if (this.comment.is_liking) {
          // 已点赞，取消点赞
          await deleteCommentLike(this.comment.com_id);
          this.comment.like_count--;
        } else {
          // 未点赞,添加点赞
          await addCommentLike(this.comment.com_id);
          this.comment.like_count++;
        }
        this.comment.is_liking = !this.comment.is_liking;
      } catch (error) {
        console.log(error);
      }

      this.zanLoading = false;
    }
  }
};
</script>

<style lang="less" scoped>
.btn {
  border: none;
}

.active {
  color: cyan;
}
</style>
